<template>
  <div class="admin-container">
    <el-container>
      <el-container class="container">
        <el-header class="header" height="60px">
          <div class="header">
            <img src="@/assets/image/logo_small.webp" class="logo" alt="" />
            <div class="right" v-if="!isToken">
              <button class="login" @click="login">Sign in</button>
              <button class="register" @click="login">Sign up</button>
              <img src="@/assets/image/diqiu.png" class="lanuage" alt="" />
            </div>
          </div>
        </el-header>
        <el-main class="main" :class="{ fixed: fixedHead, 'no-tag': !tag }">
          <AppMain />
        </el-main>
      </el-container>
      <el-footer>
        <div class="footer">
          <div class="tab" v-for="item in tabList" :key="item.id" @click="to(item)">
            <img :src="tabId == item.id ? item.selectIcon : item.icon" alt="" v-if="item.id != 2" />
            <div v-else class="in-1">
              <div class="in-2">
                <img src="@/assets/image/qianbao_act.png" alt="" />
              </div>
            </div>
            <p
              :style="'color:' + (tabId == item.id ? item.selectColor : item.color)"
              :class="item.id == 2 && 'center'"
              >{{ item.title }}</p
            >
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: 'Mobile',
  };
</script>

<script setup>
  import { computed } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  import search from '@/assets/image/search.png';
  import searchAct from '@/assets/image/search_act.png';
  import home from '@/assets/image/home.png';
  import homeAct from '@/assets/image/home_act.png';
  import qianbao from '@/assets/image/qianbao.png';
  import qianbaoAct from '@/assets/image/qianbao_act.png';
  import account from '@/assets/image/account.png';
  import accountAct from '@/assets/image/account_act.png';
  import chat from '@/assets/image/chat.png';
  import chatAct from '@/assets/image/chat_act.png';
  const store = useStore();
  const rouote = useRouter();
  const isDrawer = computed(() => {
    return store.getters['setting/isDrawer'];
  });
  const isToken = computed(() => {
    console.log(store.getters['user/accessToken']);
    return store.getters['user/accessToken'];
  });
  const tag = computed(() => {
    return store.getters['setting/tag'];
  });

  const fixedHead = computed(() => {
    return store.getters['setting/fixedHead'];
  });

  const handleCollapse = () => {
    store.dispatch('setting/changeDrawer', true);
  };
  const login = () => {
    rouote.replace('/mobileLogin');
  };

  const closeDrawer = () => {
    store.dispatch('setting/changeDrawer', false);
  };
  const tabList = ref([
    {
      title: 'More',
      icon: search,
      selectIcon: searchAct,
      color: '#98A7B5',
      selectColor: '#fff',
      id: 0,
      route: '/more',
    },
    {
      title: 'Hmoe',
      icon: home,
      selectIcon: homeAct,
      color: '#98A7B5',
      selectColor: '#fff',
      id: 1,
      route: '/home',
    },
    {
      title: 'Wallet',
      icon: qianbao,
      selectIcon: qianbaoAct,
      color: '#98A7B5',
      selectColor: '#fff',
      id: 2,
      route: '/mobileLogin',
    },
    {
      title: 'Account',
      icon: account,
      selectIcon: accountAct,
      color: '#98A7B5',
      selectColor: '#fff',
      id: 3,
      route: '/account',
    },
    {
      title: 'Chat',
      icon: chat,
      selectIcon: chatAct,
      color: '#98A7B5',
      selectColor: '#fff',
      id: 4,
      route: '/chat',
    },
  ]);
  const tabId = ref(1);
  const to = (item) => {
    if (item.title == 'Chat') {
      rouote.push(item.route);
    } else if (item.title == 'Wallet') {
      if (isToken.value) {
        rouote.push('/wallet');
      } else {
        rouote.push(item.route);
      }
    } else {
      rouote.push(item.route);
      tabId.value = item.id;
    }
  };
</script>

<style lang="scss" scoped>
  .admin-container {
    position: relative;
    background-color: $base-content-bg-color;

    .container {
      position: absolute;
      right: 0;
      left: 0;
      transition: all $base-transition-time-4;
    }

    .header {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: $base-z-index-999;
      padding: 0;
      transition: all $base-transition-time-4;
    }

    .main {
      position: relative;
      top: $base-main-mobile-top;

      &.no-tag {
        top: $base-main-mobile-no-tag-top;
      }

      background-color: $base-content-bg-color;
    }

    :deep(.el-menu) {
      border-right: $base-border-none !important;
    }

    :deep(.el-main) {
      padding: 0;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.75rem;
      background: #32343b;
      height: 3.75rem;

      .logo {
        height: 2.25rem;
      }

      .lanuage {
        height: 1.375rem;
      }

      .right {
        display: flex;
        align-items: center;
      }

      .login {
        background: #3d4049;
        margin-right: 0.5rem;
        width: 8.125rem;
        height: 2.5rem;
        color: #fff;
      }

      .register {
        width: 8.125rem;
        height: 2.5rem;
        color: #fff;
        background-color: #1d803ab3;
        background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
        margin-right: 0.5rem;
      }
    }

    .footer {
      height: 60px;
      background: #1c1e22;
      position: fixed;
      z-index: 99;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        height: 100%;

        img {
          display: block;
          width: 1.5rem;
          height: 1.5rem;
        }

        p {
          margin: 0;
          font-size: 0.75rem;
          margin-top: 0.375rem;
          position: relative;
          display: block;
        }

        .center {
          margin-top: 1.9rem;
        }

        .in-1 {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 50%;
          background: #1c1e22;
          position: absolute;
          top: -1.75rem;
          display: flex;
          align-items: center;
          justify-content: center;

          .in-2 {
            width: 2.875rem;
            height: 2.875rem;
            border-radius: 50%;
            background-color: #373c48;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
</style>
